<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>交易报表</title>
    <!-- 使用CDN引入CSS -->
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.15.3/css/all.min.css">
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css">
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/datatables/1.10.21/css/dataTables.bootstrap4.min.css">
    <style>
        .card {
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            margin-bottom: 20px;
        }
        .card-header {
            background-color: #f8f9fa;
            border-bottom: 1px solid #e9ecef;
            padding: 15px 20px;
            border-top-left-radius: 8px;
            border-top-right-radius: 8px;
        }
        .card-body {
            padding: 20px;
        }
        .btn-icon {
            margin-right: 5px;
        }
        .report-preview {
            border: 1px solid #dee2e6;
            padding: 20px;
            background-color: #f8f9fa;
            min-height: 600px;
            border-radius: 4px;
        }
        .report-actions {
            margin-bottom: 20px;
        }
        .template-card {
            cursor: pointer;
            transition: all 0.3s;
        }
        .template-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        .template-card.selected {
            border: 2px solid #007bff;
        }
        .template-img {
            height: 150px;
            object-fit: cover;
        }
    </style>
</head>
<body>
    <div class="container-fluid">
        <h2 class="mt-4 mb-4">交易报表</h2>
        
        <div class="row">
            <div class="col-md-3">
                <!-- 报表配置面板 -->
                <div class="card mb-4">
                    <div class="card-header">
                        <i class="fas fa-cog mr-1"></i>报表配置
                    </div>
                    <div class="card-body">
                        <form id="reportConfigForm">
                            <div class="form-group">
                                <label for="reportType">报表类型</label>
                                <select class="form-control" id="reportType">
                                    <option value="daily">日报表</option>
                                    <option value="weekly">周报表</option>
                                    <option value="monthly" selected>月报表</option>
                                    <option value="quarterly">季度报表</option>
                                    <option value="yearly">年度报表</option>
                                    <option value="custom">自定义报表</option>
                                </select>
                            </div>
                            
                            <div class="form-group">
                                <label for="reportTemplate">报表模板</label>
                                <select class="form-control" id="reportTemplate">
                                    <option value="standard" selected>标准报表</option>
                                    <option value="summary">摘要报表</option>
                                    <option value="detailed">详细报表</option>
                                    <option value="financial">财务报表</option>
                                </select>
                            </div>
                            
                            <div class="form-group">
                                <label for="dateRange">时间范围</label>
                                <div class="input-group">
                                    <input type="text" class="form-control datepicker" id="startDate" placeholder="开始日期">
                                    <div class="input-group-prepend input-group-append">
                                        <span class="input-group-text">至</span>
                                    </div>
                                    <input type="text" class="form-control datepicker" id="endDate" placeholder="结束日期">
                                </div>
                            </div>
                            
                            <div class="form-group">
                                <label for="warehouseSelect">仓库选择</label>
                                <select class="form-control" id="warehouseSelect">
                                    <option value="all" selected>所有仓库</option>
                                    <option value="1">1号仓库</option>
                                    <option value="2">2号仓库</option>
                                    <option value="3">3号仓库</option>
                                </select>
                            </div>
                            
                            <div class="form-group">
                                <label for="transactionType">交易类型</label>
                                <select class="form-control" id="transactionType">
                                    <option value="all" selected>所有类型</option>
                                    <option value="in">入库交易</option>
                                    <option value="out">出库交易</option>
                                    <option value="transfer">调拨交易</option>
                                    <option value="check">盘点交易</option>
                                </select>
                            </div>
                            
                            <div class="form-group">
                                <label>报表格式</label>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" value="charts" id="includeCharts" checked>
                                    <label class="form-check-label" for="includeCharts">
                                        包含图表
                                    </label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" value="tables" id="includeTables" checked>
                                    <label class="form-check-label" for="includeTables">
                                        包含表格
                                    </label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" value="summary" id="includeSummary" checked>
                                    <label class="form-check-label" for="includeSummary">
                                        包含摘要
                                    </label>
                                </div>
                            </div>
                            
                            <button type="button" class="btn btn-primary btn-block" id="generateReportBtn">
                                <i class="fas fa-file-alt btn-icon"></i>生成报表
                            </button>
                        </form>
                    </div>
                </div>
                
                <!-- 报表模板选择 -->
                <div class="card mb-4">
                    <div class="card-header">
                        <i class="fas fa-file-invoice mr-1"></i>模板样式
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-6 mb-3">
                                <div class="card template-card selected" data-template="standard">
                                    <img src="https://via.placeholder.com/150x100?text=标准模板" class="card-img-top template-img" alt="标准模板">
                                    <div class="card-body p-2">
                                        <p class="card-text text-center mb-0">标准模板</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-6 mb-3">
                                <div class="card template-card" data-template="summary">
                                    <img src="https://via.placeholder.com/150x100?text=摘要模板" class="card-img-top template-img" alt="摘要模板">
                                    <div class="card-body p-2">
                                        <p class="card-text text-center mb-0">摘要模板</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-6 mb-3">
                                <div class="card template-card" data-template="detailed">
                                    <img src="https://via.placeholder.com/150x100?text=详细模板" class="card-img-top template-img" alt="详细模板">
                                    <div class="card-body p-2">
                                        <p class="card-text text-center mb-0">详细模板</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-6 mb-3">
                                <div class="card template-card" data-template="financial">
                                    <img src="https://via.placeholder.com/150x100?text=财务模板" class="card-img-top template-img" alt="财务模板">
                                    <div class="card-body p-2">
                                        <p class="card-text text-center mb-0">财务模板</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="col-md-9">
                <!-- 报表预览与导出 -->
                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <div>
                            <i class="fas fa-file-alt mr-1"></i>报表预览
                        </div>
                        <div class="report-actions">
                            <button class="btn btn-outline-secondary mr-2" id="printReportBtn">
                                <i class="fas fa-print btn-icon"></i>打印
                            </button>
                            <div class="btn-group">
                                <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    <i class="fas fa-download btn-icon"></i>导出
                                </button>
                                <div class="dropdown-menu dropdown-menu-right">
                                    <a class="dropdown-item" href="#" id="exportPdf"><i class="far fa-file-pdf btn-icon"></i>PDF格式</a>
                                    <a class="dropdown-item" href="#" id="exportExcel"><i class="far fa-file-excel btn-icon"></i>Excel格式</a>
                                    <a class="dropdown-item" href="#" id="exportWord"><i class="far fa-file-word btn-icon"></i>Word格式</a>
                                    <a class="dropdown-item" href="#" id="exportCsv"><i class="fas fa-file-csv btn-icon"></i>CSV格式</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <div id="reportPreview" class="report-preview">
                            <div class="text-center py-5">
                                <i class="fas fa-chart-bar fa-4x text-muted mb-3"></i>
                                <h4 class="text-muted">请配置并生成报表</h4>
                                <p class="text-muted">在左侧设置报表参数后点击"生成报表"按钮</p>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 历史报表 -->
                <div class="card mt-4">
                    <div class="card-header">
                        <i class="fas fa-history mr-1"></i>历史报表
                    </div>
                    <div class="card-body">
                        <table id="historyReportsTable" class="table table-striped table-bordered" style="width:100%">
                            <thead>
                                <tr>
                                    <th>报表名称</th>
                                    <th>类型</th>
                                    <th>时间范围</th>
                                    <th>生成时间</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>2023年3月交易月报</td>
                                    <td>月报表</td>
                                    <td>2023-03-01 至 2023-03-31</td>
                                    <td>2023-04-01 10:30:22</td>
                                    <td>
                                        <button class="btn btn-sm btn-info mr-1"><i class="fas fa-eye"></i></button>
                                        <button class="btn btn-sm btn-primary mr-1"><i class="fas fa-download"></i></button>
                                        <button class="btn btn-sm btn-danger"><i class="fas fa-trash"></i></button>
                                    </td>
                                </tr>
                                <tr>
                                    <td>2023年2月交易月报</td>
                                    <td>月报表</td>
                                    <td>2023-02-01 至 2023-02-28</td>
                                    <td>2023-03-01 09:15:47</td>
                                    <td>
                                        <button class="btn btn-sm btn-info mr-1"><i class="fas fa-eye"></i></button>
                                        <button class="btn btn-sm btn-primary mr-1"><i class="fas fa-download"></i></button>
                                        <button class="btn btn-sm btn-danger"><i class="fas fa-trash"></i></button>
                                    </td>
                                </tr>
                                <tr>
                                    <td>2023年1月交易月报</td>
                                    <td>月报表</td>
                                    <td>2023-01-01 至 2023-01-31</td>
                                    <td>2023-02-01 11:05:36</td>
                                    <td>
                                        <button class="btn btn-sm btn-info mr-1"><i class="fas fa-eye"></i></button>
                                        <button class="btn btn-sm btn-primary mr-1"><i class="fas fa-download"></i></button>
                                        <button class="btn btn-sm btn-danger"><i class="fas fa-trash"></i></button>
                                    </td>
                                </tr>
                                <tr>
                                    <td>2022年第四季度报表</td>
                                    <td>季度报表</td>
                                    <td>2022-10-01 至 2022-12-31</td>
                                    <td>2023-01-05 14:22:10</td>
                                    <td>
                                        <button class="btn btn-sm btn-info mr-1"><i class="fas fa-eye"></i></button>
                                        <button class="btn btn-sm btn-primary mr-1"><i class="fas fa-download"></i></button>
                                        <button class="btn btn-sm btn-danger"><i class="fas fa-trash"></i></button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 使用CDN引入JS -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
    <!-- 移除静态引用，使用动态加载 -->
    <!-- <script src="https://cdn.bootcdn.net/ajax/libs/datatables/1.10.21/js/jquery.dataTables.min.js"></script> -->
    <!-- <script src="https://cdn.bootcdn.net/ajax/libs/datatables/1.10.21/js/dataTables.bootstrap4.min.js"></script> -->
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.min.js"></script>
    <script th:src="@{/js/transaction/report.js}"></script>
    
    <script>
        $(document).ready(function() {
            // 移除可能存在的DataTables脚本标签
            $('script[src*="datatables"]').remove();
            
            // 初始化日期选择器
            $('.datepicker').datepicker({
                format: 'yyyy-mm-dd',
                autoclose: true,
                language: 'zh-CN'
            });
            
            // 注释掉原有的DataTable初始化代码
            /*
            $('#historyReportsTable').DataTable({
                "searching": false,
                "paging": true,
                "language": {
                    "url": "/js/datatables-chinese.json"
                },
                "info": true
            });
            */
            
            // 模板选择
            $('.template-card').click(function() {
                $('.template-card').removeClass('selected');
                $(this).addClass('selected');
                var template = $(this).data('template');
                $('#reportTemplate').val(template);
            });
            
            // 生成报表按钮点击事件
            $('#generateReportBtn').click(function() {
                // 显示加载中
                $('#reportPreview').html('<div class="text-center py-5"><i class="fas fa-spinner fa-spin fa-3x text-primary mb-3"></i><h4>正在生成报表，请稍候...</h4></div>');
                
                // 模拟异步加载报表
                setTimeout(function() {
                    generateSampleReport();
                }, 1500);
            });
            
            // 导出按钮事件
            $('#exportPdf').click(function(e) {
                e.preventDefault();
                alert('报表将以PDF格式导出');
            });
            
            $('#exportExcel').click(function(e) {
                e.preventDefault();
                alert('报表将以Excel格式导出');
            });
            
            $('#exportWord').click(function(e) {
                e.preventDefault();
                alert('报表将以Word格式导出');
            });
            
            $('#exportCsv').click(function(e) {
                e.preventDefault();
                alert('报表将以CSV格式导出');
            });
            
            // 打印按钮事件
            $('#printReportBtn').click(function() {
                alert('将打开打印预览窗口');
            });
            
            // 动态加载DataTables库
            function loadDataTables() {
                return new Promise((resolve, reject) => {
                    // 尝试从CDN加载
                    $.getScript('https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js')
                        .done(function() {
                            console.log('DataTables core loaded from CDN');
                            resolve();
                        })
                        .fail(function() {
                            console.log('Failed to load DataTables from CDN, trying local backup');
                            // 从本地加载备份
                            $.getScript('/js/jquery.dataTables.min.js')
                                .done(function() {
                                    console.log('DataTables core loaded from local backup');
                                    resolve();
                                })
                                .fail(function() {
                                    console.error('Failed to load DataTables from local backup');
                                    reject();
                                });
                        });
                });
            }
            
            function loadDataTablesBS4() {
                return new Promise((resolve, reject) => {
                    // 尝试从CDN加载
                    $.getScript('https://cdn.datatables.net/1.10.21/js/dataTables.bootstrap4.min.js')
                        .done(function() {
                            console.log('DataTables BS4 loaded from CDN');
                            resolve();
                        })
                        .fail(function() {
                            console.log('Failed to load DataTables BS4 from CDN, trying local backup');
                            // 从本地加载备份
                            $.getScript('/js/dataTables.bootstrap4.min.js')
                                .done(function() {
                                    console.log('DataTables BS4 loaded from local backup');
                                    resolve();
                                })
                                .fail(function() {
                                    console.error('Failed to load DataTables BS4 from local backup');
                                    reject();
                                });
                        });
                });
            }
            
            // 加载DataTables核心库和Bootstrap 4扩展
            loadDataTables()
                .then(() => loadDataTablesBS4())
                .then(() => {
                    console.log('All DataTables scripts loaded');
                    initDataTable();
                })
                .catch(() => {
                    console.error('Failed to load DataTables scripts');
                    alert('加载DataTables库失败，请刷新页面重试');
                });
            
            function initDataTable() {
                // 检查DataTable是否已成功加载
                if ($.fn.dataTable && $.fn.dataTable.defaults) {
                    console.log('DataTable is available, initializing...');
                    // 初始化报表表格
                    $('#reportTable').DataTable({
                        "searching": false,
                        "paging": true,
                        "info": true,
                        "language": {
                            "url": '/js/datatables-chinese.json'
                        }
                    });
                    
                    // 初始化历史报表表格
                    $('#historyReportsTable').DataTable({
                        "searching": false,
                        "paging": true,
                        "info": true,
                        "language": {
                            "url": '/js/datatables-chinese.json'
                        }
                    });
                    
                    console.log('DataTables initialized successfully');
                } else {
                    console.error('DataTable is not available');
                    setTimeout(function() {
                        console.log('Retrying DataTable initialization...');
                        initDataTable();
                    }, 1000);
                }
            }
        });
        
        // 生成示例报表
        function generateSampleReport() {
            var reportType = $('#reportType').val();
            var reportTemplate = $('#reportTemplate').val();
            var startDate = $('#startDate').val() || '2023-03-01';
            var endDate = $('#endDate').val() || '2023-03-31';
            var warehouse = $('#warehouseSelect').val();
            var transactionType = $('#transactionType').val();
            
            var reportHtml = `
                <div class="report-header text-center mb-4">
                    <h3>交易${getReportTypeName(reportType)}报表</h3>
                    <p class="text-muted">报表周期: ${startDate} 至 ${endDate}</p>
                </div>
                
                <div class="report-summary mb-4">
                    <h4>报表摘要</h4>
                    <div class="row">
                        <div class="col-md-3">
                            <div class="card bg-light">
                                <div class="card-body text-center">
                                    <h5>交易总数</h5>
                                    <h2>1,284</h2>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card bg-light">
                                <div class="card-body text-center">
                                    <h5>交易总额</h5>
                                    <h2>¥1,256,890</h2>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card bg-light">
                                <div class="card-body text-center">
                                    <h5>日均交易量</h5>
                                    <h2>42.8</h2>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card bg-light">
                                <div class="card-body text-center">
                                    <h5>环比增长</h5>
                                    <h2>+12.5%</h2>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="row mb-4">
                    <div class="col-md-6">
                        <h4>交易类型分布</h4>
                        <div id="reportTypeChart" style="height: 300px;"></div>
                    </div>
                    <div class="col-md-6">
                        <h4>交易金额趋势</h4>
                        <div id="reportTrendChart" style="height: 300px;"></div>
                    </div>
                </div>
                
                <div class="report-details mb-4">
                    <h4>交易明细</h4>
                    <table class="table table-striped table-bordered">
                        <thead>
                            <tr>
                                <th>交易ID</th>
                                <th>交易类型</th>
                                <th>产品名称</th>
                                <th>数量</th>
                                <th>单位</th>
                                <th>金额</th>
                                <th>仓库</th>
                                <th>交易时间</th>
                                <th>状态</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>TX20230301001</td>
                                <td>采购入库</td>
                                <td>大米</td>
                                <td>1000</td>
                                <td>kg</td>
                                <td>¥5,000</td>
                                <td>1号仓库</td>
                                <td>2023-03-01 09:30:22</td>
                                <td><span class="badge badge-success">已完成</span></td>
                            </tr>
                            <tr>
                                <td>TX20230302001</td>
                                <td>销售出库</td>
                                <td>小麦</td>
                                <td>500</td>
                                <td>kg</td>
                                <td>¥3,000</td>
                                <td>2号仓库</td>
                                <td>2023-03-02 14:15:47</td>
                                <td><span class="badge badge-success">已完成</span></td>
                            </tr>
                            <tr>
                                <td>TX20230305001</td>
                                <td>库存调拨</td>
                                <td>玉米</td>
                                <td>800</td>
                                <td>kg</td>
                                <td>¥4,000</td>
                                <td>1号仓库→3号仓库</td>
                                <td>2023-03-05 11:05:36</td>
                                <td><span class="badge badge-success">已完成</span></td>
                            </tr>
                            <tr>
                                <td>TX20230310001</td>
                                <td>库存盘点</td>
                                <td>大豆</td>
                                <td>1200</td>
                                <td>kg</td>
                                <td>¥6,000</td>
                                <td>2号仓库</td>
                                <td>2023-03-10 16:22:10</td>
                                <td><span class="badge badge-success">已完成</span></td>
                            </tr>
                            <tr>
                                <td>TX20230315001</td>
                                <td>采购入库</td>
                                <td>花生</td>
                                <td>600</td>
                                <td>kg</td>
                                <td>¥4,800</td>
                                <td>3号仓库</td>
                                <td>2023-03-15 10:45:33</td>
                                <td><span class="badge badge-success">已完成</span></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                
                <div class="report-footer text-right">
                    <p class="text-muted">报表生成时间: ${new Date().toLocaleString()}</p>
                    <p class="text-muted">报表生成人: 系统管理员</p>
                </div>
            `;
            
            $('#reportPreview').html(reportHtml);
            
            // 初始化图表
            setTimeout(function() {
                initReportCharts();
            }, 100);
        }
        
        // 获取报表类型名称
        function getReportTypeName(type) {
            var types = {
                'daily': '日',
                'weekly': '周',
                'monthly': '月',
                'quarterly': '季度',
                'yearly': '年度',
                'custom': '自定义'
            };
            return types[type] || '';
        }
        
        // 初始化报表图表
        function initReportCharts() {
            // 交易类型分布图
            var typeChart = echarts.init(document.getElementById('reportTypeChart'));
            var typeOption = {
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b}: {c} ({d}%)'
                },
                legend: {
                    orient: 'vertical',
                    right: 10,
                    top: 'center',
                    data: ['采购入库', '销售出库', '库存调拨', '库存盘点']
                },
                series: [
                    {
                        name: '交易类型',
                        type: 'pie',
                        radius: ['50%', '70%'],
                        avoidLabelOverlap: false,
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '18',
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: [
                            {value: 335, name: '采购入库'},
                            {value: 310, name: '销售出库'},
                            {value: 234, name: '库存调拨'},
                            {value: 135, name: '库存盘点'}
                        ]
                    }
                ]
            };
            typeChart.setOption(typeOption);
            
            // 交易金额趋势图
            var trendChart = echarts.init(document.getElementById('reportTrendChart'));
            var trendOption = {
                tooltip: {
                    trigger: 'axis'
                },
                xAxis: {
                    type: 'category',
                    data: ['3/1', '3/5', '3/10', '3/15', '3/20', '3/25', '3/30']
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        formatter: '¥{value}'
                    }
                },
                series: [{
                    data: [15000, 22000, 18000, 25000, 30000, 28000, 32000],
                    type: 'line',
                    smooth: true,
                    areaStyle: {}
                }]
            };
            trendChart.setOption(trendOption);
            
            // 窗口大小变化时重新调整图表大小
            window.addEventListener('resize', function() {
                typeChart.resize();
                trendChart.resize();
            });
        }
    </script>
</body>
</html> 